<template>
	<div class="index">
    <van-nav-bar title="上传头像" left-arrow  @click-left="onClickLeft" />
    <div class="flex" style="width: 100vw; height: 90vh; padding-top: 10vh; justify-content: center; background: #fff;">
    			<van-uploader :after-read="afterRead3"  deletable="false" preview-size="3rem" show-upload="false" >
    				<div v-if="all.img_url"><img :src="all.img_url" style="width: 3rem; height: 3rem; border-radius: 1.5rem;"></div>
    				<div style=" position: relative;" v-if="!all.img_url">
              <img src="../../../static/img/g8.png" style="width: 2.8rem;">
              <img src="../../../static/img/g9.png" style="width: 0.6rem; position: absolute; right: 0; bottom: 0;">
            </div>
            <div class="flexcc" style="font-size: 16px; margin-top: 0.25rem; color: rgb(120, 125, 133);">点击上传头像</div>
    			</van-uploader>
          <div @click="baocun()" class="flexcc" style="background: rgb(0, 90, 255); position: fixed; bottom: 0.5rem; left: 0.5rem; width: 6.6rem; height: 0.9rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">确定</div>
    </div>
	</div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'query',
		data() {
			return {
        all:""
			}
		},
		created() {

		},
		mounted() {
      document.title = "上传头像"
      this.getinfo()
		},
		methods: {
      baocun:function(){
        axios.post('/agent/mstore/update',this.all).then((response)=>{
          if (response.data.msg.code == 0) {
            this.getinfo()
            this.$router.back()
          } else {
            vant.Toast(response.data.msg.info);
          }
        })
      },
      getinfo:function(){
        axios.get('/api/mstore/info?shop_id='+window.atob(this.$route.query.shop_id)).then((response)=>{
          if (response.data.msg.code == 0) {
            this.all = response.data.data
          } else {
            vant.Toast(response.data.msg.info);
          }
        })
      },
      onClickLeft:function(){
        this.$router.back()
      },
      afterRead3: function(file) {
      	this.uploadok(file.file,'img_url')
      },
      getRandomChar:function(len = 11)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      //单个图片上传
      uploadok: function(file,who) {
        let name = this.getRandomChar() + '.' + file.name.split('.')[1]
        var that = this
        axios.post(`/api/qiniu/uploadtoken`,{name:name})
          .then(response => {
            if(response.data.msg.code == 0){
              const observer = {
                next(res){
                  console.log(res)
                },
                error(err){
                  console.log(err)
                },
                complete(res){

                  that.$set(that.all,who,'https://gperson.gantanhaokeji.top/'+ res.key)
                }
              }
              const observable = qiniu.upload(file,name, response.data.data.token, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      }
		}
	}
</script>


<style scoped lang="less">
  .index{
    .af{ position: relative; z-index: 2;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 6px;
        background: rgb(232, 237, 252);
        z-index: -1;
      }
    }
  }
</style>
